<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>16 - 湖北人民检察院</title>
    <script src="../lib/ol4/ol4.js"></script>
    <script src="../lib/proj4/proj4.js"></script>
    <link rel="stylesheet" href="../css/ol4/ol.css">
    <link rel="stylesheet" href="../css/main.css">
    <style>
        .ol-mouse-position {
            background: #eeeeee;
        }
    </style>
</head>
<body>
<div id="map"></div>
</body>
<script>
    const projection = ol.proj.get('EPSG:4326');
    // projection.setExtent([-180, -90, 180, 90]);
    projection.setExtent([-180.0, -85.0511287798065, 180.0, 85.05112877980648]);
    const tileSize = 256;
    const projectionExtent = projection.getExtent();
    const origins = [
        [-180.0, 90.0],
        ol.extent.getTopLeft(projectionExtent)
    ];
    const origin = origins[0];

    const resolutions = [0.703125, 0.3515625, 0.17578125, 0.087890625, 0.0439453125, 0.02197265625, 0.010986328125, 0.0054931640625, 0.00274658203125, 0.001373291015625, 6.866455078125E-4, 3.4332275390625E-4, 1.71661376953125E-4, 8.58306884765625E-5, 4.291534423828125E-5, 2.1457672119140625E-5, 1.0728836059570312E-5, 5.364418029785156E-6, 2.682209014892578E-6, 1.341104507446289E-6];
    const matrixIds = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19];

    const tileGrid = new ol.tilegrid.WMTS({
        origin,
        resolutions: resolutions,
        // extent: projectionExtent,
        matrixIds: matrixIds
    });

    const url = `http://143.128.20.61:8090/iserver/services/map-ugcv5-MAPHB/wmts-china`;

    const wmtsSource = new ol.source.WMTS({
        url,
        layer: 'MAP_HB',
        matrixSet: 'ChinaPublicServices_MAP_HB',
        format: 'image/png',
        projection: projection,
        tileGrid: tileGrid,
        style: 'default',
        wrapX: false
    });
    // 图层
    const baseLayer = new ol.layer.Tile({
        source: wmtsSource
    });

    const points = [
        [408.667955, -28.903809],
        [116.384722, 39.889916],
        [408.652957, -28.924255]
    ];
    const centerPoint = points[0];

    const radius = 8500;

    const vectorSource = new ol.source.Vector({
        features: [],
        wrapX: true
    });

    const iconLayer = new ol.layer.Vector({
        source: vectorSource
    });


    const map = new ol.Map({
        layers: [
            baseLayer,
            iconLayer
        ],
        target: 'map',
        view: new ol.View({
            center: centerPoint,
            projection,
            zoom: 13,
            maxZoom: 19,
            minZoom: 1,
            resolutions
        }),
        controls: ol.control.defaults().extend([
            new ol.control.MousePosition()
        ])
    });

    const metersPerUnit = map.getView().getProjection().getMetersPerUnit();

    // console.log(metersPerUnit);
    const realRadius = radius / metersPerUnit;

    const circleFeature = new ol.Feature({
        geometry: new ol.geom.Circle(centerPoint, realRadius * 1.145)
    });

    circleFeature.setStyle(new ol.style.Style({
        fill: new ol.style.Fill({
            color: 'rgba(255,127,15,0.5)'
        }),
        stroke: new ol.style.Stroke({
            color: '#333',
            width: 2
        })
    }));

    vectorSource.addFeature(circleFeature);

    map.on('pointermove', evt => {
        if (evt.dragging) return;
        let hit = map.hasFeatureAtPixel(map.getEventPixel(evt.originalEvent));
        map.getTargetElement().style.cursor = hit ? 'pointer' : 'default';
        // console.log(hit);
    });

</script>
</html>